<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-08-10 10:06:38
 * @LastEditors: lyy 2684842688@qq.com
 * @LastEditTime: 2022-09-26 14:07:16
 * @FilePath: \project\pyy\src\views\demand\details.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div id="demand_details">
        <div class="top">
            <van-nav-bar
                title="需求详情"
                left-arrow
                @click-left="$router.push('/demand')"
            />
        </div>
        <div id="preview" v-show="isShow">
             <div v-html="htmlText"></div>
        </div>
        <div class="content">
            <div>
                <div>需求标题：</div>
                <div>{{ form.title }}</div>
            </div>
            <div>
                <div>需求提交人：</div>
                <div>
                    {{ form.submitter
                    }}{{
                        form.commitPhone ? "（" + form.commitPhone + "）" : ""
                    }}
                </div>
            </div>
            <div>
                <div>需求方单位：</div>
                <div>
                    {{ form.unit }}
                </div>
            </div>
            <div>
                <div>需求分类一级：</div>
                <div>{{ form.classification_level }}</div>
            </div>
            <div>
                <div>需求分类二级：</div>
                <div>
                    {{ form.classification_second_level }}
                </div>
            </div>
            <div>
                <div>需求期望实现日期：</div>
                <div>{{ form.demandImplementTime }}</div>
            </div>
            <!-- <div>
                <div>需求板块：</div>
                <div>{{ form.plate }}</div>
            </div> -->
            <div>
                <div>需求背景：</div>
                <div>{{ form.background }}</div>
            </div>
            <!-- <div>
                <div>需求源头：</div>
                <div>{{ form.sourceDemand }}</div>
            </div> -->
            <div>
                <div>需求描述：</div>
                <div style="margin: 0">{{ form.content }}</div>
            </div>
            <div>
                <div>需求附件：</div>
                <div class="accessory">
                    <span
                        v-for="(item, index) in form.attachment"
                        :key="item.id"
                        @click="preview(item.id)"
                        >
                        <!-- :href="`${baseurl}/file/downloadService/${item.id}?access_token=${access_token}`" -->
                        {{ item.name
                        }}{{
                            index !== form.attachment.length - 1 ? "，" : null
                        }}</span
                    >
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from "vant";
import api from "../../http/api";
import { BASEURL } from "../../http/apiUrl";
export default {
    data() {
        return {
            htmlText:'',
            isShow:false,
            baseurl: null,
            access_token: null,
            form: {
                title: "",
                submitter: "",
                unit: "",
                commitPhone: "",
                background: "",
                sourceDemand: "",
                content: "",
                classification_level: "",
                classification_second_level: "",
                attachment: "",
            },
        };
    },
    mounted() {
        document.getElementById('preview').style.width = window.screen.width +'px'
        this.baseurl = BASEURL;
        this.access_token = localStorage.frameToken;
        const id = this.$route.query.id;

        // 根据路由id获取相应的详情信息
        this.getRouteMsg({
            id,
            loginPhone: localStorage.phone,
            query: "",
        });
    },
    methods: {
            // 附件
    preview(id){
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
      });
      api.equipment
        .checkTheCertificateDetails(id)
        .then((res) => {
          const { code, data, msg } = res.data || {};
          if (code !== 200) return Toast.fail(msg);
          // console.log('设备详情data :>> ', data);
          this.htmlText = data
          this.isShow = true
        })
        .finally(() => {
          setTimeout(toast.clear, 500);
        });
    },
        /**
         * 获取列表页面传递过来的数据
         * @param {obj} data 参数
         */
        getRouteMsg(data) {
            Toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
            });
            // 列表页面传过来的id
            api.demand.getDemandById(data).then((res) => {
                // console.log(res);
                Toast.clear();
                if (res.data.code == 200) {
                    this.form = res.data.data.rows[0];
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
#preview{
    position: absolute;
    height: 100%;
    background-color: #fff;
    img{
        width: 100%;
    }
}
#demand_details {
    width: 100vw;
    min-height: 100vh;
    box-sizing: border-box;
    padding-top: 51px;
    position: relative;
    .top {
        position: fixed;
        width: 100%;
        top: 0;
        overflow: hidden;
        background-color: white;
        z-index: 1;
    }
    .content {
        padding: 10px;
        width: 90%;
        margin: 0 auto;
        font-family: "Inter";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        color: #333333;
        & > div {
            display: flex;
            // justify-items: flex-start;
            & > div:nth-of-type(1) {
                white-space: nowrap;
            }
            .accessory {
                color: blue;
                a {
                    // padding-right: 10px;
                    color: blue;
                }
            }
        }
    }
    /deep/ .van-ellipsis {
        overflow: visible;
    }
    /deep/ .van-nav-bar__left {
        padding: 8px;
    }
    /deep/ .van-nav-bar__content {
        height: 51px;
    }
    /deep/ .van-nav-bar__title {
        font-family: "Inter";
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 20px;
        /* identical to box height, or 111% */

        text-align: center;
        letter-spacing: -0.24px;

        color: #333333;
    }
    /deep/ .van-nav-bar .van-icon {
        /* 文字颜色3 */

        color: #999999;
    }
}
</style>